<template>
  <div class="Harden-carousel">
    <div class="Harden-carousel-box">
      <ul class="Harden-carousel-body">
        <li
          class="Harden-carousel-item"
          :class="{ show: num == index }"
          v-for="(item, index) in items"
          :key="index"
        >
          <img :src="item.src" alt="" />
        </li>
      </ul>
      <!-- 小圆圆 -->
      <div class="Harden-carousel-indicator">
        <span
          :class="{ active: num == index }"
          v-for="(item, index) in items"
          :key="index"
          @click="num = index"
        >
        </span>
      </div>

      <!-- 两边切换按钮 -->
      <div class="Harden-carousel-carousel-btn prev" @click="prev">
        <svg class="icon">
          <use xlink:href="#icon-zuojiantou"></use>
        </svg>
      </div>
      <div class="Harden-carousel-carousel-btn next" @click="next">
        <svg class="icon">
          <use xlink:href="#icon-xiangyoujiantou"></use>
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  props: {
    items: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    const num = ref(1); //显示的图片下标
    //切换图片
    const prev = () => {
      if (num.value == 0) {
        num.value = props.items.length;
      }
      //左
      console.log(num);
      num.value--;
    };
    const next = () => {
      num.value++;
      if (num.value == props.items.length) {
        num.value = 0;
      }
    };
    return {
      num,
      prev,
      next,
    };
  },
};
</script>

<style lang="scss">
.Harden-carousel {
  width: 600px;
  height: 400px;
}
.Harden-carousel:hover .Harden-carousel-carousel-btn {
  opacity: 1;
}
.Harden-carousel-box {
  width: 100%;
  height: 100%;
  position: relative;
}
.Harden-carousel-item {
  //隐藏的
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s linear;
  img {
    width: 100%;
    height: 100%;
    // object-fit: cover;
  }
}
.show {
  opacity: 1;
  z-index: 1;
}

.Harden-carousel-indicator {
  position: absolute;
  left: 0;
  bottom: 20px;
  z-index: 2;
  width: 100%;
  text-align: center;
}

.Harden-carousel-indicator > span {
  display: inline-block;
  margin-left: 15px;
  width: 12px;
  height: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  cursor: pointer;
}

.active {
  background: #fff !important;
}

.Harden-carousel-carousel-btn {
  cursor: pointer;
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 191px;
  z-index: 2;
  text-align: center;
  line-height: 44px;
  opacity: 0;
  transition: 0.5s;
}

.prev {
  left: 20px;
}
.next {
  right: 20px;
}
.icon {
  margin: 0 auto;
  margin-top: 10px;
  width: 22px;
  height: 22px;
}
</style>
